<template>
  <div class="container">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
import CesiumNavigation from 'cesium-navigation-es6'
export default {
  name: 'earth',
  props: {
    polygons: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  watch: {
    polygons (val, oldVal) {
      //
    }
  },
  mounted () {
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmYjk4ODljMC1hYTg3LTQ1YTMtYmI4My00YzE2ODM3Y2M3NzgiLCJpZCI6MzExMjAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTQ4NzY0ODR9.h8EDRmH59na9u13J2QhBAUp2qFhSGAk-e1YWp5VwLSk'
    let viewer = new Cesium.Viewer('cesiumContainer', {
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      baseLayerPicker: false,
      navigationHelpButton: false,
      shouldAnimate: false,
      animation: false,
      timeline: false,
      fullscreenButton: false,
      vrButton: false,
      requestRenderMode: true // 只有看页面的时候才进行渲染
    })
    viewer.scene.debugShowFramesPerSecond = true // 显示帧数
    viewer.scene.moon.show = false // 关闭月亮特效
    viewer.scene.fog.enabled = false // 关闭雾效果
    viewer.scene.sun.show = false // 关闭太阳效果
    viewer.scene.skyBox.show = false // 关闭天空盒效果
    viewer.resolutionScale = 1 // 画面精细度\

    // 加个操作导航
    let navigationOptions = {}
    navigationOptions.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50)
    navigationOptions.enableCompass = true
    navigationOptions.enableZoomControls = true
    navigationOptions.enableDistanceLegend = true
    navigationOptions.enableCompassOuterRing = true
    CesiumNavigation(viewer, navigationOptions)

    // 给viewer添加事件
    viewer.camera.moveEnd.addEventListener(this.computeMapInfo)
    window.cesiumViewer = viewer

    window.cesiumViewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.gov.cn/img_w/wmts?tk=b5bc04094061c6f6a0c466eb9e6486f0`, // 记得换成自己的key
        layer: 'img',
        style: 'default',
        tileMatrixSetID: 'w',
        format: 'tiles',
        maximumLevel: 18
      })
    )
    this.drawPolygon()
    this.addGltf()
    // this.add3Dtiles()
  },
  methods: {
    add3Dtiles () {
      const viewer = window.cesiumViewer
      let tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          url: Cesium.IonResource.fromAssetId(583730),
          modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
            Cesium.Cartesian3.fromDegrees(0, 0)
          )
        })
      )
      tileset.readyPromise.then(() => {
        viewer.zoomTo(tileset)
        let extras = tileset.asset.extras
        tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle)
      }).otherwise((error) => {
        console.log('error', error)
      })
    },
    // 添加glb数据
    addGltf () {
      let position = Cesium.Cartesian3.fromDegrees(120, 36)
      let url = 'http://localhost:8081/hainayun.glb'
      let entity = window.cesiumViewer.entities.add({
        name: 'hainayun',
        position: position,
        model: {
          uri: url
        }
      })
      console.log(entity.name)
    },
    // 请求地图范围和zoom
    computeMapInfo () {
      const _viewer = window.cesiumViewer
      let height = Math.ceil(_viewer.camera.positionCartographic.height)
      let extent = this.computeMapExtent(_viewer)
      let zoom = this.computeMapZoom(height)
      console.log(zoom, extent)
    },
    computeMapExtent (viewer) {
      const rectangle = viewer.camera.computeViewRectangle()
      const extent = [
        rectangle.west / Math.PI * 180,
        rectangle.south / Math.PI * 180,
        rectangle.east / Math.PI * 180,
        rectangle.north / Math.PI * 180
      ]
      return extent
    },
    computeMapZoom (height) {
      const a = 40487.57
      const b = 0.00007096758
      const c = 91610.74
      const d = -40467.74
      return Math.round(d + (a - d) / (1 + Math.pow(height / c, b)))
    },
    // 添加形状
    drawPolygon () {
      // 立方体
      let redBox = {
        id: 'box123',
        position: Cesium.Cartesian3.fromDegrees(116.0, 39.0, 0.0),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK
        },
        description: '这是一个立方体'
      }
      window.cesiumViewer.entities.add(redBox)
      // 墙
      let redWall = {
        wall: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            116.0,
            39.0,
            100000.0,
            120.0,
            36.0,
            100000.0
          ]),
          minimumHeights: [0, 0],
          material: Cesium.Color.RED
        }
      }
      window.cesiumViewer.entities.add(redWall)
      // 环球线--一半
      let orangeLine = {
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            1,
            0,
            250000,
            180,
            0,
            250000
          ]),
          width: 5,
          material: new Cesium.PolylineOutlineMaterialProperty({
            color: Cesium.Color.ORANGE,
            outlineWidth: 2,
            outlineColor: Cesium.Color.BLACK
          })
        }
      }
      window.cesiumViewer.entities.add(orangeLine)

      window.cesiumViewer.zoomTo(window.cesiumViewer.entities)
    }
  }
}
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
  }
  #cesiumContainer {
    width: 100%;
    height: 100vh;
  }
  .cesium-viewer-bottom               /* logo信息 */
  {
    display: none;
  }
</style>
